<template>
    <div class="i-table-no-border">
        <!-- 表格操作项 start  -->
        <Button type="primary" icon="ios-download-outline" class="ivu-mr-8" @click="exportData()">导出</Button>
        <Button type="primary" icon="md-add" :to="dynamicData.jumpPath['newEdit']">新建</Button>
        <!-- <Button icon="md-list" class="ivu-ml-8" v-show="selectedData.length">批量操作</Button> -->
        <Dropdown class="ivu-ml-8" v-show="selectedData.length" @on-click="handleClickItem">
            <Button>更多操作<Icon type="ios-arrow-down" /></Button>
            <DropdownMenu slot="list">
                <DropdownItem name="delete">删除</DropdownItem>
            </DropdownMenu>
        </Dropdown>
        <!-- 表格操作项 end  -->
        <!-- 自定义列 start  -->
        <Poptip placement="bottom" width="400" class="ivu-ml-8" :word-wrap="true">
            <Button icon="ios-funnel-outline">自定义列</Button>
            <div class="api" slot="content">
                <Checkbox-group v-model="showColumns">
                    <Checkbox v-for="(item, index) in showColumnsList" :key="index" :label="item.value">{{ item.label }}</Checkbox>
                </Checkbox-group>
            </div>
        </Poptip>
        <!-- 自定义列 end  -->
        <!-- 表格内容 start  -->
        <Table ref="table" :columns="filterColumns" :data="tableDataList" :loading="loading" class="ivu-mt" stripe @on-filter-change="handleFilterChange" @on-select="handleSelect" @on-select-cancel="handleSelectCancel" @on-select-all="handleSelectAll" @on-select-all-cancel="handleSelectAllCancel" >
            <template slot-scope="{ row }" slot="productStatus">
                <Badge v-if="row.productStatus == 0" status="default" text="上架" />
                <Badge v-if="row.productStatus == 1" status="processing" text="下架" />
            </template>
            <template slot-scope="{ row }" slot="auditStatus">
                <Tag v-if="row.auditStatus == 0" color="success">通过</Tag>
                <Tag v-if="row.auditStatus == 1" color="error">未通过</Tag>
            </template>
            <template slot-scope="{ row }" slot="action">
                <router-link :to="dynamicData.jumpPath['view']">查看</router-link>
                <Divider type="vertical" />
                <Dropdown @on-click="(name) => handleClickMore(name, index, row)" transfer>
                    <a>更多<Icon type="ios-arrow-down" /></a>
                    <DropdownMenu slot="list">
                        <DropdownItem name="newEdit">编辑</DropdownItem>
                        <DropdownItem name="delete">删除</DropdownItem>
                    </DropdownMenu>
                </Dropdown>
            </template>
        </Table>
        <!-- 表格内容 end  -->
        <!-- 分页 start  -->
        <div class="ivu-mt ivu-text-center">
            <Page :total="totalNum" show-total show-sizer :current.sync="nowPage" @on-change="getData" @on-page-size-change="handleChangePage" />
        </div>
        <!-- 分页 end  -->
    </div>
</template>
<script>
    import { GetTableList } from '@api/basePage';
    import tables from '@/mixins/table'; // 混入通用代码
    import { dynamicData } from './dynamicConfig'; // 组件配置文件
    export default {
        mixins: [tables],
        data () {
            return {
                dynamicData: dynamicData, // 配饰数据
                // 表格头部信息
                columns: dynamicData.columns,
                // 表格有哪些列 用于列的显示隐藏
                showColumnsList: dynamicData.showColumnsList,
                // 默认显示那些列
                showColumns: dynamicData.showColumns
            }
        },
        methods: {
            // 获取表格的数据
            getData (formData) {
                let data = {
                    pageInfo: {
                        nowPage: this.nowPage,
                        pageShow: this.pageShow
                    },
                    formData: formData
                }
                this.loading = true;
                // 开始请求商品列表
                GetTableList('/api/getTableList', 'get', data).then(res => {
                    this.tableDataList = res.list;
                    this.totalNum = res.pageInfo.totalNum;
                    this.loading = false;
                })
            },
            //  操作更多选择
            handleClickMore (name, index, row) {
                if (name === 'newEdit') {
                    this.$router.push({ path: this.dynamicData.jumpPath['newEdit'], query: { skuNo: row.skuNo } })
                } else if (name === 'delete') {
                    this.$Modal.confirm({
                        title: '删除操作',
                        content: '确定删除此数据吗？',
                        onOk: () => {
                            this.tableDataList.splice(index, 1);
                            this.$Message.success('删除成功');
                        }
                    });
                }
            },
            // 行内编辑
            toEditLineCont (row, index) {
                this.editIndex = index;
                this.editValue = row.productName;

                // ajax 提交数据
            }
        }
    }
</script>
